/* eslint-disable */
/**
 * @description  收益性表现（时点信息）
 * @author shenhong
 */
import { Radio } from 'antd';
import { connect } from 'dva';
import React, { PureComponent } from 'react';

import style from './index.less';

import { ThreeHeaderC,  XYAxisChartsC, QuickQueryC } from '../../../components';

class ShowEchartsOne extends PureComponent {
  constructor() {
    super();
    this.state = {
      echartType: '1', // 数据类型，1-区间。2-年化
    };
  }

  componentDidMount() {
    this.props.onRef(this);
    const { args } = this.props;
    this.getData(args);
  }

  componentDidUpdate(prevProps) {
    const { args } = this.props;
    if (JSON.stringify(args) !== JSON.stringify(prevProps.args)) {
      this.getData(args);
    }
  }

  getData = (data) => {
    const { dispatch } = this.props;
    const { echartType } = this.state;
    dispatch({
      type: 'yieldPerformanceM/getEchartsOne',
      payload: { echartType, ...data },
    });
  };

  refresh = (e) => {
    const { args } = this.props;
    this.setState(
      {
        echartType: e,
      },
      () => {
        this.getData(args);
      },
    );
  };

  showEchartsOne = () => {
    const {
      yieldPerformanceM: { echartsOne, echartsTwo },
    } = this.props;
    const xAxis = echartsOne.xAxis || [];
    const series = echartsOne.series || [];
    series.length &&
      series.map((item) => {
        item.toFixed = 2;
      });
    return (
      <div style={{ height: '378px', paddingTop: '20px', paddingBottom: '20px' }}>
        <XYAxisChartsC
          series={series}
          xAxis={xAxis}
          height={358}
          // dataZoom = {true}
          yAxisUnit={['单位(%)']}
          type='bar'
        />
      </div>
    );
  };

  // 类型切换
  chartChange = (e) => {
    this.setState({
      echartType: e,
    });
    this.props.changeEchartType(e);
  };

  render() {
    const { args } = this.props;
    return (
      <div className={style.echarts2}>
        {/* <Spin spinning={loading.effects['yieldPerformanceM/getEchartsOne'] == true}> */}
        <ThreeHeaderC
          title={`收益率（${args.endDate}）`}
          Right={
            <div className={style.radioGroup}>
              <QuickQueryC dataSource={[{title:'区间', value:'1'},{title:'年化', value:'2'}]} onChange={(e)=>this.chartChange(e)} initialValue={this.state.echartType}/>
           </div>
          }
        />
        <div className='echarts'>{this.showEchartsOne()}</div>
        {/* </Spin> */}
      </div>
    );
  }
}
export default connect(({ yieldPerformanceM, loading }) => ({
  yieldPerformanceM,
  loading,
}))(ShowEchartsOne);
